import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator'
import CountUp from 'countup'

@Component({
  name: 'CountTo',
})
export default class CountTo extends Vue {
  public counter: CountUp = null
  public get eleId() {
    return `count_to_${(this as any)._uid}`
  }
  @Prop({type: Number, default: 0}) public readonly start !: number
  @Prop(Number) public readonly end!: number

  public update(endVal: number): void {
    this.counter.update(endVal)
  }

   // 这里 onClick 为自定义事件名
   @Emit('on-click')
   public click(event: any) {
     // 这里写完后效果等同于：public click(event) { this.$emit('on-click', event) }
     return event
   }

  protected render() {
    return (
      <div class="count-up-warp" on-click={this.click}>
        <span id={this.eleId}></span>
      </div>
    )
  }
  protected mounted() {
    // 创建CountUp实例，并保存在counter上
    this.counter = new CountUp(this.eleId, this.start, this.end, 0, 1, {})
    // 调用此方法让动画效果开始
    this.counter.start()
  }
}
